<template>
  <div>
    <ul class="list" v-show="$route.meta.show">
      <!-- 路由组件的传参（动态路由） query params -->
      <li v-for="(item, index) in redaData" :key="item.id">
        <!-- 组件传参params的写法 -->
        <!-- 第一种 -->
        <!-- <router-link :to="`/quanneiredian/quanneidetail/${index}`"> -->
        <!-- 第二种 -->
        <!-- <router-link
          :to="{
            name: 'quanneidetail',
            params: { index: index },
          }"
        > -->
        <!-- query 传参   -->
        <!-- 写法1 -->
        <!-- <router-link
          :to="{ path: '/quanneiredian/quanneidetail', query: { index } }"
        > -->
        <!-- 写法2 -->
        <!-- <router-link :to="{ name: 'quanneidetail', query: { index } }"> -->
        <!-- 写法3 -->
        <router-link :to="`/quanneiredian/quanneidetail?index=${index}`">
          <p>{{ item.title }}</p>
          <img :src="item.img" alt="" srcset="" />
        </router-link>
      </li>
    </ul>
    <router-view :info="info"></router-view>
    <button @click="back">后退</button>
    <button @click="goChuangXin">go chuangxin</button>
  </div>
</template>

<script>
import redaData from "../data/data";
/* 若想在template中渲染数据，数据必须有初始值 */
export default {
  name: "",
  props: [""],
  data() {
    return {
      redaData,
      info: "周坚伟说，周一检查作业，写不好，打两下，没事！！",
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {
    console.log(redaData);
  },

  methods: {
    back() {
      this.$router.back();
    },
    goChuangXin() {
      // push在历史记录中插入，能回退时可以回退
      // this.$router.push("/chuangxin");
      // replace替换了当期的，回退不了
      this.$router.replace("/login");
    },
  },

  watch: {},
};
</script>
<style lang='less' scoped>
.list {
  li {
    margin-top: 0.1333rem;
    display: flex;
    justify-content: space-between;
    img {
      width: 4rem;
      height: 200px;
    }
  }
}
</style>